<!-- 基础：1、介绍 条件和循环 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：1、介绍 条件和循环</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 条件：使用v-if指令，根据seen这个vue中的数据判断是否要显示p标签 -->
	<div id="app-1">
		<p v-if="seen">Now you see me</p>
	</div>
    <div id="app-2">
    	<p v-if="see">Now you can't see me</p>
    </div>

    <!-- 循环：使用v-for指令 -->
    <div id="app-3">
		<ol>
			<!-- 跟PHP的语法有点类似，把todos看成一个数组，todo是每次从数组中取出的元素，
				每个元素又是一个对象，所以需要用todo.text来引用对象属性 
				所以遍历之后会产生多个li标签
			-->
			<li v-for="todo in todos">     
				{{ todo.text }}
			</li>
		</ol>
    </div>

	<script type="text/javascript">
		// 设置了可见
		var app1 = new Vue({
			el: '#app-1',
			data: {
				seen: true
			}
		})
		// 在demo2中演示里Vue可以控制DOM数据的渲染，这里演示了Vue也可能控制DOM结构的显示与否，取决于data数据，称之为绑定DOM结构到数据
		// 设置了不可见
		var app2 = new Vue({
			el: '#app-2',
			data: {
				see: false      // data里数据名称随意没有固定要求，new Vue实例时传入的参数对象的属性名才是固定的
				                // 还有很多的属性可以在API文档中查看			
			}
		})

		var app3 = new Vue({
			el: '#app-3',
			data: {
				// todos是一个数组，因为有中括号，数组的每个元素是一个对象，因为是花括号
				todos: [                
					{ text: 'Learn Javascript'},
					{ text: 'Learn Vue'},
					{ text: 'Build something awesome'}
				]
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->